// CompactTools.tsx
import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import styles from "./CommonTools.module.css";
import enterprise from "./icons/enterprise.svg";
import government from "./icons/government.svg";
import design from "./icons/design.svg";
import matting from "./icons/matting.svg";
import aiPaint from "./icons/ai-paint.svg";
import topics from "./icons/topics.svg";

export type ToolTag = "recommend" | "hot";

export interface ToolItem {
  id: string;
  title: string;
  description: string;
  tag?: ToolTag;
  hoverColor: string;
  icon: string;
  link: string;
}
const CompactTools: React.FC<{ tools: ToolItem[] }> = ({ tools }) => {
  const navigate = useNavigate();
  const [hoverIndex, setHoverIndex] = useState<number | null>(null);

  return (
    <div className={styles.container}>
      <h2 className={styles.title}>常用工具</h2>
      <div className={styles.toolRow}>
        {tools.map((tool, index) => (
          <div
            key={tool.id}
            className={`${styles.toolItem} ${hoverIndex === index ? styles.hover : ""
              }`}
            onMouseEnter={() => setHoverIndex(index)}
            onMouseLeave={() => setHoverIndex(null)}
            onClick={() => navigate(tool.link)}
            style={{
              backgroundColor: hoverIndex === index ? tool.hoverColor : "#fff",
              borderColor: hoverIndex === index ? tool.hoverColor : "#eaeaea",
              cursor: "pointer",
            }}
          >
            {tool.tag && (
              <div className={`${styles.tag} ${styles[tool.tag]}`}>
                {tool.tag === "recommend" ? "优先推荐" : "HOT"}
              </div>
            )}
            <div className={styles.contentWrapper}>
              <img
                src={tool.icon}
                alt={tool.title}
                className={styles.toolIcon}
                style={{
                  filter:
                    hoverIndex === index ? "brightness(0) invert(1)" : "none",
                }}
              />
              <div className={styles.textContent}>
                <h3 className={styles.toolTitle} >{tool.title}</h3>
                <p className={styles.toolDesc}>{tool.description}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// 更新后的数据模型（高度降低，颜色调整）
export const compactTools: ToolItem[] = [
  {
    id: "enterprise",
    title: "企业图库",
    description: "亿级图库企业会员专属",
    tag: "recommend",
    hoverColor: "#2d3436",
    icon: enterprise,
    link: "/",
  },
  {
    id: "government",
    title: "政务图库",
    description: "行政事业单位专用模版",
    hoverColor: "#c0392b",
    icon: government,
    link: "/",
  },
  {
    id: "design",
    title: "在线设计",
    description: "不会PS，也能做设计",
    tag: "hot",
    hoverColor: "#27ae60",
    icon: design,
    link: "/design/designHome",
  },
  {
    id: "matting",
    title: "智能抠图",
    description: "一键抠图神器",
    hoverColor: "#2980b9",
    icon: matting,
    link: "/",
  },
  {
    id: "ai-paint",
    title: "AI绘画",
    description: "人工智能生成图片",
    hoverColor: "#8e44ad",
    icon: aiPaint,
    link: "/",
  },
  {
    id: "topics",
    title: "热门专题",
    description: "精选设计模板，视频专辑",
    hoverColor: "#e67e22",
    icon: topics,
    link: "/ThemePage",
  },
];

export default CompactTools;